<template>
  <!-- 用户列表 -->
  <view class="content">
    <!-- 搜索栏 -->
    <view class="main-bgColor fff">
      <uni-search-bar
        placeholder="请输入用户手机"
        @confirm="search"
        @blur="search"
        @cancel="cancel"
        @clear="cancel"
        :focus="true"
        v-model="state.param.wechatMobile"
      ></uni-search-bar>
    </view>

    <!-- 列表 -->
    <view class="list">
      <view class="item bg-white" v-for="(item, index) in state.dataSource" :key="item.id">
        <view class="flex flex-y-center fz28 gray3">
          <view class="flex1">用户：{{ item.wechatName }}</view>
          <view class="ml10 gray9">{{ item.wechatMobile || '-' }}</view>
        </view>
        <view class="flex flex-y-center fz24 gray9">
          <view class="flex1 fz26">{{ item.wechatOpenid }}</view>
          <view>
            <button
              v-if="item.status === 0"
              size="mini"
              class="btn btn-red fff ml30"
              @click.stop="
                popupRef.open();
                state.userId = item.id;
                state.index = index;
              "
            >
              拉黑
            </button>
            <button v-else size="mini" class="btn btn-green fff ml30" @click.stop="onBlackDelete(item.id, index)">恢复</button>
          </view>
        </view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>

    <!-- 设置弹窗 -->
    <uni-popup ref="popupRef" type="center">
      <view class="popup popup-black bg-white">
        <view class="tit fz36 t-c">拉黑原因</view>
        <view class="ct"><textarea class="textarea bg-gray" placeholder="请输入" v-model="state.blackReason"></textarea></view>
        <view class="btn-box mt50 flex t-c fz34">
          <view class="flex1" @click="popopClose">取消</view>
          <view class="flex1 main-bgColor fff" @click="onSure">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import minix from '@/common/js/mixin.js';
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getUerList, blackAdd, blackDelete } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  param: {
    wechatMobile: ''
  },
  dataSource: [],
  userId: '',
  blackReason: '',
  index: ''
});

const popupRef = ref(null);

// 获取数据
const loadData = page => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = 'loading';
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getUerList(data)
    .then(res => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (!res.result.records || res.result.records.length < mix.query.pageSize) {
        mix.loading = 'noMore';
      } else {
        mix.loading = 'more';
      }
    })
    .finally(() => {
      mix.isSend = false;
      uni.stopPullDownRefresh();
    });
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === 'noMore') return;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData(1);
});

// 搜索
const search = e => {
  loadData(1);
};

// 关闭弹窗
const popopClose = () => {
  popupRef.value.close();
  state.blackReason = '';
};

// 确定拉黑
const onSure = () => {
  if (!state.blackReason) {
    uni.showToast({
      icon: 'none',
      title: '请填写拉黑原因'
    });
    return false;
  }
  const data = {
    blackReason: state.blackReason,
    userId: state.userId
  };
  blackAdd(data).then(res => {
    uni.showToast({
      title: '拉黑成功'
    });
    const newObj = JSON.parse(JSON.stringify(state.dataSource[state.index]));
    newObj.status = 1;
    state.dataSource.splice(state.index, 1, newObj);
    popopClose();
  });
};

// 恢复用户
const onBlackDelete = (id, index) => {
  blackDelete({ id }).then(res => {
    uni.showToast({
      title: res.message
    });
    const newObj = JSON.parse(JSON.stringify(state.dataSource[index]));
    newObj.status = 0;
    state.dataSource.splice(index, 1, newObj);
  });
};

// 搜索取消
const cancel = () => {};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    line-height: 2;
  }
}

.popup-black {
  .tit {
    padding-bottom: 10rpx;
  }
  .ct {
    padding: 0 30rpx;
    .textarea {
      width: 100%;
      height: 200rpx;
      padding: 20rpx;
      line-height: 1.5;
      box-sizing: border-box;
    }
  }
}
</style>
